<template>
  <div class="bg-F9F1E5">
    <div class="bg-yun">
      <div class="bg-daofu">
        <div class="flex justify-center p-t-24">
          <p class="f-16">{{ curDayStr }}</p>
        </div>
        <div class="flex justify-center align-center f-40 f-bold c-D32D30">
          <p class="iconfont icon-member-left f-24" style="margin-right: 2rem;" @click="subDay"></p>
          <p class="text-black text-shadow" @click.stop="showDate = true;">{{ dayStr }}</p>
          <p class="iconfont icon-icon_more f-24" style="margin-left: 2rem;" @click="addDay"></p>
        </div>
        <div class="flex-j-c" style="color: #000;">
          <p class="f-16" style="margin-right: 1rem;">{{ yearStr }}</p>
          <p class="f-16">{{ weekStr }}</p>
        </div>
      </div>
    </div>

    <div class="border bg-FFF9F0" style="margin: 0.75rem; margin-top: -1rem;">
      <div class="flex-a-c" style="padding: 0.375rem 0.625rem">
        <p class="f-20 f-bold c-fff" style="margin-right: 0.5rem;padding:3px 6px;background: #2C9C56;border-radius:50%;">宜</p>
        <p class="flex t-l c-2C9C56">{{ yi }}</p>
      </div>
      <div class="flex-a-c border-top" style="padding: 0.375rem 0.625rem">
        <p class="f-20 f-bold c-fff" style="margin-right: 0.5rem;padding: 3px 6px;background: #D32D30;border-radius:50%;">忌</p>
        <p class="flex t-l c-D32D30">{{ ji }}</p>
      </div>
    </div>

    <div class="flex border bg-FFF9F0" style="margin: 12px;flex-wrap: wrap;">
      <div style="width: 20%;" class="p-t-b-8">
        <p class="f-bold c-BD7E54">喜神</p>
        <p>{{ xi }}</p>
      </div>
      <div class="border-left p-t-b-8" style="width: 20%;">
        <p class="f-bold c-BD7E54">福神</p>
        <p>{{ xi }}</p>
      </div>
      <div class="border-left p-t-b-8" style="width: 20%;">
        <p class="f-bold c-BD7E54">财神</p>
        <p>{{ xi }}</p>
      </div>
      <div class="border-left p-t-b-8" style="width: 20%;">
        <p class="f-bold c-BD7E54">阳贵神</p>
        <p>{{ yanggui }}</p>
      </div>
      <div class="border-left p-t-b-8" style="width: 20%;">
        <p class="f-bold c-BD7E54">阴贵神</p>
        <p>{{ yingui }}</p>
      </div>
      <!--  -->
      <div style="width: 33.3%;" class="border-top p-t-b-8">
        <p class="f-bold c-BD7E54">十二值星</p>
        <p>{{ zhiXing }}</p>
      </div>
      <div class="border-top border-left p-t-b-8" style="width: 33.3%;">
        <p class="f-bold c-BD7E54">今日太岁</p>
        <p>{{ taiSui }}</p>
      </div>
      <div class="border-top border-left p-t-b-8" style="width: 33.3%;">
        <p class="f-bold c-BD7E54">今日生肖</p>
        <p>{{ shengXiao }}</p>
      </div>
      <!--  -->
      <div class="border-top p-t-b-8" style="width: 50%;">
        <p class="f-bold c-BD7E54">吉神宜趋</p>
        <p>{{ jiShen }}</p>
      </div>
      <div class="border-top border-left p-t-b-8" style="width: 50%;">
        <p class="f-bold c-BD7E54">凶煞宜忌</p>
        <p>{{ xiongSha }}</p>
      </div>
      <!--  -->
      <div class="border-top p-t-b-8" style="width: 50%;">
        <p class="f-bold c-BD7E54">二十八星宿</p>
        <p>{{ xing }}</p>
      </div>
      <div class="border-top border-left p-t-b-8" style="width: 50%;">
        <p class="f-bold c-BD7E54">冲煞</p>
        <p>{{ sha }}</p>
      </div>
      <!--  -->
      <div class="border-top p-t-b-8" style="width: 50%;">
        <p class="f-bold c-BD7E54">禄神</p>
        <p>{{ Lu }}</p>
      </div>
      <div class="border-top border-left p-t-b-8" style="width: 50%;">
        <p class="f-bold c-BD7E54">胎神</p>
        <p>{{ tai }}</p>
      </div>
      <!--  -->
      <div class="border-top p-t-b-8" style="width: 100%;">
        <p class="f-bold c-BD7E54">彭祖百忌</p>
        <p>{{ peng }}</p>
      </div>
    </div>

    <div class="flex" style="margin: 16px;">
      <van-button round block type="info" v-if="this.$route.query.data" color="#2c9c56" @click.stop="onRefresh">查看今日</van-button>
      <van-button round block type="info" color="#BD7E54" @click.stop="onCheck">择日</van-button>
    </div>

    <van-popup v-model="showDate" position="bottom" round>
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" @confirm="dateChange"/>
    </van-popup>
  </div>
</template>

<script>
const { Solar, Lunar } = require("./lunar.js");
export default {
  data() {
    return {
      curDay: new Date(),
      curDayStr: "",
      dayStr: "",
      yearStr: "",
      weekStr: "",
      ji: "",
      yi: "",
      xi: "",
      fu: "",
      cai: "",
      gui: "",
      yanggui: "",
      yingui: "",
      xing: "",
      sha: "",
      peng: "",
      jiShen: "",
      xiongSha: "",
      tai: "",
      taiSui: "",
      shengXiao: "",
      Lu: "",
      zhiXing: "",

      showDate: false,
      minDate: new Date(1924, 0, 1),
      currentDate: new Date(),
    };
  },
  created() {
    $http.get("member.login.check-login", {}, "."); //主要是判断登录和获取底部导航
    if (this.$route.query.data) return this.render(this.$route.query.data);
    this.render();
  },
  methods: {
    render(setDayStr) {
      this.curDay = setDayStr ? new Date(setDayStr) : new Date();
      let d = Lunar.fromDate(this.curDay);
      // console.log(d.toFullString())
      let sd = d.getSolar();
      this.curDayStr = sd.getYear() + "年" + sd.getMonth() + "月" + sd.getDay() + "日";
      this.dayStr = d.getMonthInChinese() + "月" + d.getDayInChinese();
      this.yearStr = d.getYearInGanZhi() + "(" + d.getYearShengXiao() + ")年";
      this.weekStr = "星期" + d.getWeekInChinese();
      this.ji = d.getDayJi().join(" ");
      this.yi = d.getDayYi().join(" ");
      this.xi = d.getDayPositionXiDesc();
      this.fu = d.getDayPositionFuDesc();
      this.cai = d.getDayPositionCaiDesc();
      this.gui = "阳神" + d.getPositionYangGuiDesc() + " 阴神" + d.getPositionYinGuiDesc();
      this.yanggui = d.getPositionYangGuiDesc();
      this.yingui = d.getPositionYinGuiDesc();
      this.xing = d.getGong() + "方" + d.getXiu() + d.getZheng() + d.getAnimal() + "(" + d.getXiuLuck() + ")";
      this.sha = d.getDayShengXiao() + "日 冲" + d.getDayChongDesc() + " " + d.getDaySha();
      this.peng = d.getPengZuGan() + " " + d.getPengZuZhi();
      this.jiShen = d.getDayJiShen().join(" ");
      this.xiongSha = d.getDayXiongSha().join(" ");
      this.tai = d.getDayPositionTai();
      this.taiSui = d.getDayPositionTaiSui() + " " + d.getDayPositionTaiSuiDesc();
      this.shengXiao = d.getDayShengXiao();
      this.Lu = d.getDayLu();
      this.zhiXing = d.getZhiXing();

      // console.log("节气：" + d.getJieQi());
      // var p = d.getPrevJieQi(),
      //   n = d.getNextJieQi();
      // console.log("上个节气：" + p.getName() + " " + p.getSolar().toYmdHms() + " 星期" + p.getSolar().getWeekInChinese());
      // console.log("下个节气：" + n.getName() + " " + n.getSolar().toYmdHms() + " 星期" + n.getSolar().getWeekInChinese());
    },
    dateChange(e) {
      if (!e) {
        return;
      }
      this.showDate = false;
      let selectDate = new Date(e);
      this.render(selectDate);
    },
    subDay() {
      let d = Solar.fromDate(this.curDay);
      d = d.next(-1);
      this.render(d.toYmd());
    },
    addDay() {
      let d = Solar.fromDate(this.curDay);
      d = d.next(1);
      this.render(d.toYmd());
    },
    onCheck() {
      this.$router.push(this.fun.getUrl("lunarGoodDay", {}, {}));
    },
    onRefresh() {
      this.$router.replace(this.fun.getUrl("almanac", {}, {}));
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.p-12 {
  padding: 0.75rem;
}
.p-t-24 {
  padding-top: 1.5rem;
}
.border {
  border: 1px solid #bd7e54;
  border-radius: 8px;
}
.c-fff {
  color: #fff;
}
.c-D32D30 {
  color: #d32d30;
}
.c-2C9C56 {
  color: #2c9c56;
}
.c-BD7E54 {
  color: #bd7e54;
}
.border-top {
  border-top: 1px solid #bd7e54;
}
.border-left {
  border-left: 1px solid #bd7e54;
}
.p-t-b-8 {
  padding: 0.5rem 0;
}
.bg-FFF9F0 {
  background: #fff9f0;
}

.bg-F9F1E5 {
  background: #f9f1e5;
  min-height: calc(100vh - 50px);
  background-image: url("./shanshui-bg.png");
  background-position: bottom;
  background-size: 100%;
}
.bg-daofu {
  background-image: url("./daofu.png");
  background-size: 7.5rem;
  background-repeat: no-repeat;
  background-position: center;
  padding: 1rem 0 2rem;
}
.bg-yun {
  background-image: url("./yun.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}
</style>
